<template>
  <div class="aaa order-detail-container">
    <!-- 订单进度卡片 -->
    <el-card class="order-progress-card">
      <template #header>
        <div class="card-header">
          <h3>订单进度</h3>
        </div>
      </template>
      <div class="card-body">
        <el-steps :active="orderStatus.status" align-center style="max-width: 600px">
          <el-step v-for="item in ordersStatus" :title="item.name" :description="orderStatus.time"
                   class="order-step-item" />
        </el-steps>
      </div>
    </el-card>

    <!-- 订单信息卡片 -->
    <el-card class="order-info-card">
      <template #header>
        <div class="card-header">
          <h3>订单信息</h3>
        </div>
      </template>
      <div class="card-body">
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">订单编号：{{ orders.id }}</p>
          <p class="order-info-item">订单状态：{{ getOrderStatusText(orders.ordersStatus) }}</p>
          <p class="order-info-item">订单完成时间：{{ orders.tradeFinishTime }}</p>
          <p class="order-info-item">客户电话：{{ orders.contactsPhone }}</p>
          <p class="order-info-item">服务详细地址：{{ orders.serveAddress }}</p>
        </div>
        <div style="display: inline-block;width:6%;"></div>
        <div style="display:inline-block; width: 47%;">
          <p class="order-info-item">订单状态：{{ getOrderStatusText(orders.ordersStatus) }}</p>
          <p class="order-info-item">服务类型名称：{{ orders.serveTypeName }}</p>
          <p class="order-info-item">服务名称：{{ orders.serveItemName }}</p>
          <p class="order-info-item">客户姓名：{{ orders.contactsName }}</p>
        </div>
      </div>
    </el-card>

    <!-- 服务信息卡片 -->
    <el-card class="service-info-card">
      <template #header>
        <div class="card-header">
          <h3>服务信息</h3>
        </div>
      </template>
      <div class="card-body">
        <div style="display:inline-block; width: 47%;">
          <div class="service-item-image-wrapper">
            <img :src="orders.serveItemImg" style="width: 40%" alt="服务项图片"
                 class="service-item-image" />
          </div>
        </div>
        <div style="display: inline-block;width:6%;"></div>
        <div style="display:inline-block; width: 47%;">
          <p class="service-info-item">服务项名称：{{ orders.serveTypeName || '--' }}</p>
          <p class="service-info-item">服务类型名称：{{ orders.serveTypeName || '--' }}</p>
          <p class="service-info-item">服务人姓名：{{ orders.serveProviderStaffName || '--' }}</p>
          <p class="service-info-item">服务人手机号：{{ orders.serveProviderStaffPhone || '--' }}</p>
          <p class="service-info-item">服务详细地址：{{ orders.serveAddress || '--' }}</p>
          <p class="service-info-item">服务开始时间：{{ orders.serveStartTime || '--' }}</p>
          <p class="service-info-item">服务结束时间：{{ orders.serveEndTime || '--' }}</p>
        </div>
      </div>
    </el-card>

    <!-- 服务记录卡片 -->
    <el-card class="service-record-card">
      <template #header>
        <div class="card-header">
          <h3>服务记录</h3>
        </div>
      </template>
      <div class="card-body">
        <p class="service-record-item">服务开始时间：{{ orders.serveStartTime || '--' }}</p>
        <p class="service-record-item">服务开始说明：{{ orders.serveBeforeIllustrate || '--' }}</p>
        <p class="service-record-item">
          服务前图片：
          <span v-if="!Array.isArray(orders.serveBeforeImgs) || orders.serveBeforeImgs.length === 0">--</span>
          <img v-for="imgUrl in parsedServeBeforeImgs" :src="imgUrl" :key="imgUrl" style="width: 200px"
               class="service-before-image" />
        </p>
        <p class="service-record-item">服务结束时间：{{ orders.serveEndTime || '--' }}</p>
        <p class="service-record-item">服务结束说明：{{ orders.serveAfterIllustrate || '--' }}</p>
        <p class="service-record-item">
          服务后图片：
          <span v-if="!Array.isArray(orders.serveAfterImgs) || orders.serveAfterImgs.length === 0">--</span>
          <img v-for="imgUrl in parsedServeAfterImgs" :src="imgUrl" :key="imgUrl" style="width: 200px"
               class="service-after-image" />
        </p>
      </div>
    </el-card>

    <!-- 支付记录卡片 -->
    <el-card class="payment-record-card" v-if="orders.payStatus!=null">
      <template #header>
        <div class="card-header">
          <h3>支付记录</h3>
        </div>
      </template>
      <div class="card-body">
        <div class="payment-record-content">
          <p class="payment-record-item">支付状态：{{ getPaymentStatusText(orders.payStatus) }}</p>
          <p class="payment-record-item">支付渠道：{{ getPaymentChannelText(orders.tradingChannel) }}</p>
          <p class="payment-record-item">单价：{{ orders.price || '--' }}</p>
          <p class="payment-record-item">购买数量：{{ orders.purNum || '--' }}</p>
          <p class="payment-record-item">优惠金额：{{ orders.discountAmount || '--' }}</p>
          <p class="payment-record-item">订单总金额：{{ orders.totalAmount || '--' }}</p>
          <p class="payment-record-item">实际支付金额：{{ orders.realPayAmount || '--' }}</p>
          <p class="payment-record-item">支付时间：{{ orders.payTime || '--' }}</p>
        </div>
      </div>
    </el-card>

    <!-- 退款状态卡片 -->
    <el-card class="refund-status-card" v-if="orders.refundStatus!=null">
      <template #header>
        <div class="card-header">
          <h3>退款状态</h3>
        </div>
      </template>
      <div class="card-body">
        <div class="refund-status-content">
          <p class="refund-status-item">退款状态：{{ getRefundStatusText(orders.refundStatus) }}</p>
          <p class="refund-status-item">退款人：{{ orders.contactsName || '--' }}</p>
          <p class="refund-status-item">支付渠道：{{ getPaymentChannelText(orders.tradingChannel) }}</p>
          <p class="refund-status-item">单价：{{ orders.price || '--' }}</p>
          <p class="refund-status-item">购买数量：{{ orders.purNum || '--' }}</p>
          <p class="refund-status-item">优惠金额：{{ orders.discountAmount || '--' }}</p>
          <p class="refund-status-item">订单总金额：{{ orders.totalAmount || '--' }}</p>
          <p class="refund-status-item">实际支付金额：{{ orders.realPayAmount || '--' }}</p>
          <p class="refund-status-item">支付时间：{{ orders.payTime || '--' }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useRoute } from "vue-router";
import { findHistoryById } from "@/api/order/historyOrders";

const route = useRoute();
const id = route.query.id;
console.log(id);

// 订单状态
const orderStatus = ref({
  status: null,
  time: null
});
const orders = ref({});
// 定义解析后的服务前图片链接数组
const parsedServeBeforeImgs = ref([]);
// 定义解析后的服务后图片链接数组
const parsedServeAfterImgs = ref([]);

// 获取订单详细信息
const getOrderDetails = () => {
  findHistoryById(id).then(res => {
    console.log(res.data);
    orders.value = res.data.data;

    // 解析服务前图片链接数组
    watchEffect(() => {
      try {
        if (orders.value.serveBeforeImgs) {
          const parsedArray = JSON.parse(orders.value.serveBeforeImgs);
          parsedServeBeforeImgs.value = parsedArray;
        } else {
          parsedServeBeforeImgs.value = [];
        }
      } catch (error) {
        console.error('解析服务前图片链接数组出错：', error);
        parsedServeBeforeImgs.value = [];
      }
    });

    // 解析服务后图片链接数组
    watchEffect(() => {
      try {
        if (orders.value.serveAfterImgs) {
          const parsedArray = JSON.parse(orders.value.serveAfterImgs);
          parsedServeAfterImgs.value = parsedArray;
        } else {
          parsedServeAfterImgs.value = [];
        }
      } catch (error) {
        console.error('解析服务后图片链接数组出错：', error);
        parsedServeAfterImgs.value = [];
      }
    });

    // 设置订单状态
    if (orders.value.ordersStatus == 0) {
      orderStatus.value.status = 1;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 100) {
      orderStatus.value.status = 2;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 200) {
      orderStatus.value.status = 3;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 300) {
      orderStatus.value.status = 4;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 500) {
      orderStatus.value.status = 5;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 600) {
      orderStatus.value.status = 6;
      orderStatus.value.time = orders.value.createTime;
    } else if (orders.value.ordersStatus == 700) {
      orderStatus.value.status = 7;
      orderStatus.value.time = orders.value.createTime;
    }
  });
};

// 初始化获取订单详细信息
getOrderDetails();

// 订单状态文本映射
const orderStatusMap = {
  0: '待支付',
  100: '派单中',
  200: '待服务',
  300: '服务中',
  500: '订单完成',
  600: '已取消',
  700: '已关闭'
};
const getOrderStatusText = (status) => {
  return orderStatusMap[status] || '--';
};

// 支付状态文本映射
const paymentStatusMap = {
  1: '支付成功',
  null: '--',
  else: '已关闭'
};
const getPaymentStatusText = (status) => {
  return paymentStatusMap[status] || paymentStatusMap.else;
};

// 支付渠道文本映射
const paymentChannelMap = {
  'ALI_PAY': '支付宝',
  null: '--',
  else: '微信'
};
const getPaymentChannelText = (channel) => {
  return paymentChannelMap[channel] || paymentChannelMap.else;
};

// 退款状态文本映射
const refundStatusMap = {
  1: '退款中',
  2: '退款成功',
  3: '退款失败',
  null: '--',
  else: '已关闭'
};
const getRefundStatusText = (status) => {
  return refundStatusMap[status] || refundStatusMap.else;
};

// 订单状态数组
const ordersStatus = ref([
  {
    name: '待支付',
    value: 0
  },
  {
    name: '派单中',
    value: 100
  },
  {
    name: '待服务',
    value: 200
  },
  {
    name: '服务中',
    value: 300
  },
  {
    name: '订单完成',
    value: 500
  },
  {
    name: '已取消',
  },
  {
    name: '已关闭',
    value: 700
  }
]);
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.order-progress-card,
.order-info-card,
.service-info-card,
.service-record-card,
.payment-record-card,
.refund-status-card {
  margin: 20px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.order-step-item {
  font-size: 14px;
  color: #666;
}

.order-info-item,
.service-info-item,
.service-record-item,
.payment-record-item,
.refund-status-item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.service-item-image-wrapper {
  text-align: center;
  margin-bottom: 10px;
}

.service-item-image,
.service-before-image,
.service-after-image {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-record-content,
.refund-status-content {
  padding: 10px;
}
</style>
